<template>
  <div class="notice_box">
    <ul class="uls">
      <li @click="showgonggaohandel" ref="nt1">公告</li>
      <li @click="showbisaihandel" ref="nt2">比赛</li>
      <li @click="showjiuyehandel" ref="nt3">简讯</li>
      <li @click="showxiangmuhandel" ref="nt4">会议</li>
      <li id="many_more" title="更多" @click="toNoticHandel">+</li>
    </ul>
    <div class="null" v-if="gg.resultSize === 0">什么都没有发布</div>
    <ul class="uls_nto" v-if="gg.resultSize > 0">
      <li v-for="items of gg.result" :key="items.id" @click="toX" :id="items.id">
        {{items.title}}
          <i>
            [ {{items.createTime | datas}} ]
          </i>
      </li>
    </ul>
  </div>
</template>

<script>
import { gg } from 'com/shuju'
import { formatDate } from 'com/data'
import { mapState } from 'vuex'
export default {
  name: 'HomeNotice',
  data () {
    return {
    }
  },
  computed: {
    ...mapState({
      gg: 'homeGg'
    })
  },
  filters: {
    datas: function (time) {
      var date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd')
    }
  },
  methods: {
    toX () {
      var id = event.target.getAttribute('id')
      this.$router.push({
        path: '/home/shownotice',
        query: {
          noticId: id
        }
      })
    },
    toNoticHandel () {
      this.$router.push('/home/notice')
    },
    showgonggaohandel () {
      this.please('公告')
      this.$refs.nt1.style.borderBottom = '3px solid rgb(15,113,213)'
      this.$refs.nt2.style.borderBottom = '1px solid rgb(255,255,255)'
      this.$refs.nt3.style.borderBottom = '1px solid rgb(255,255,255)'
      this.$refs.nt4.style.borderBottom = '1px solid rgb(255,255,255)'
    },
    showbisaihandel () {
      this.please('比赛')
      this.$refs.nt1.style.borderBottom = '1px solid rgb(255,255,255)'
      this.$refs.nt2.style.borderBottom = '3px solid rgb(15,113,213)'
      this.$refs.nt3.style.borderBottom = '1px solid rgb(255,255,255)'
      this.$refs.nt4.style.borderBottom = '1px solid rgb(255,255,255)'
    },
    showjiuyehandel () {
      this.please('简讯')
      this.$refs.nt1.style.borderBottom = '1px solid rgb(255,255,255)'
      this.$refs.nt2.style.borderBottom = '1px solid rgb(255,255,255)'
      this.$refs.nt3.style.borderBottom = '3px solid rgb(15,113,213)'
      this.$refs.nt4.style.borderBottom = '1px solid rgb(255,255,255)'
    },
    showxiangmuhandel () {
      this.please('会议')
      this.$refs.nt1.style.borderBottom = '1px solid rgb(255,255,255)'
      this.$refs.nt2.style.borderBottom = '1px solid rgb(255,255,255)'
      this.$refs.nt3.style.borderBottom = '1px solid rgb(255,255,255)'
      this.$refs.nt4.style.borderBottom = '3px solid rgb(15,113,213)'
    },
    please (name) {
      var data = new FormData()
      data.set('page', 0)
      data.set('size', 6)
      data.set('bulletionTypeName', name)
      gg(data, this)
    }
  },
  mounted () {
    this.please('公告')
    this.showgonggaohandel()
  }
}
</script>

<style lang="stylus" scoped>
  .notice_box{
    position: relative
    width: 800px
    height: 300px
    box-shadow: 0 0 1.5px rgb(220,220,220)
    float: left
    margin-top: .4rem
    margin-left: .3rem
    background-color: #fff
    .uls{
      width: 100%
      height: 50px
      list-style: none
      padding: 0
      margin: 0
      border: 1px solid rgb(230,230,230)
      li{
        font-size: .5rem
        color: rgb(150,150,150)
        float: left
        cursor: pointer
        padding-top: .25rem
        padding-bottom: .15rem
        padding-right: .35rem
        padding-left: .35rem
        text-align: center
      }
      li:hover {
        background-color: rgb(240,240,240)
      }
      li + li + li + li + li{
        margin-left: .5rem
        font-size: .8rem
        padding: 0
      }
      #many_more{
        margin-right: 0
      }
    }
    .null{
      position: absolute
      width: 100%
      height: calc(100% - 55px)
      text-align: center
      font-size: .6rem
      color: rgb(190,190,190)
      line-height: 200px
      z-index: 1
    }
    .uls_nto{
      position: absolute
      list-style: none
      padding: 0
      margin: 0
      width: 100%
      li{
        position: relative
        width: calc(100% - .35rem)
        height: .6rem
        color: rgb(120,120,120)
        line-height: .4rem
        border-bottom: 1px solid rgb(230,230,230)
        padding-left: .35rem
        margin-top: .212rem
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
        i{
          letter-spacing: 1px
          position: absolute
          padding-left: 5rem
          right: 1rem
          color: rgb(110,110,110)
        }
      }
      li:hover{
        color: rgb(15,50,213)
        cursor: pointer
        i{
          color: rgb(15,50,213)
        }
      }
    }
  }
</style>
